<template>
  <div class="announcement">
    <el-scrollbar height="300px" @scroll="handleScroll">
      <div ref="scrollCard" style="padding: 10px">
        <el-space fill wrap>
          <el-card
            v-for="(item, index) in list"
            :key="index"
            shadow="hover"
            @click="clickCard(item)"
          >
            <template #header>
              <div class="card-header">
                <div style="width: 65%; font-weight: bold; font-size: 16px">
                  {{ item.title }}
                </div>
                <span class="unimportant"> 发布者：{{ item.author }} </span>
              </div>
            </template>
            <span class="context">{{ item.context }}</span>
          </el-card>
          <div class="pdRefresh">
            <div v-if="flag === 1" ref="refresh">
              <div class="myself">
                <svg-icon :name="`xiala`" />
              </div>
              <span class="unimportant">下滑刷新</span>
            </div>
            <div v-else-if="flag === -1">
              <span class="unimportant">没有更多的数据啦！</span>
            </div>
          </div>
        </el-space>
      </div>
    </el-scrollbar>

    <el-dialog
      v-model="dialogVisible"
      :title="dialog.title"
      width="1000px"
      center
      append-to-body
    >
      <template #header="{ titleId, titleClass }">
        <div :id="titleId" :class="titleClass">
          <div style="font-weight: bold; font-size: 24px; padding: 10px">
            {{ dialog.title }}
          </div>
          <div style="text-align: right">
            <span class="unimportant" style="margin-right: 20px">
              发布时间：{{ dialog.createTime }}
            </span>
            <span class="unimportant">发布者：{{ dialog.author }}</span>
          </div>
        </div>
      </template>
      <span v-html="dialog.context"></span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, reactive, ref, toRefs } from "vue";

export default defineComponent({
  name: "TabList",
  props: {
    methodName: {
      type: String,
      required: true,
      default: "",
    },
  },
  setup(props) {
    const scrollCard = ref();
    const flag = ref(0);
    const refresh = ref();

    const state = reactive({
      tishiHeight: 0,
      dialogVisible: false,
      list: [] as any,
      dialog: {
        title: "",
        createTime: "",
        author: "",
        context: "",
      } as any,
    });

    // 滚动条事件
    const handleScroll = (scrollObj: any) => {
      if (flag.value === 1) {
        state.tishiHeight = refresh.value.clientHeight;
      } else if (state.tishiHeight !== 0) state.tishiHeight = 0;

      if (scrollObj.scrollTop + 300 === scrollCard.value.clientHeight) {
        if (flag.value === 0) {
          flag.value = 1;
        } else {
          parentFun().then((res: any) => {
            if (res.code === 200) {
              state.list = state.list.concat(res.data);
            } else {
              flag.value = -1;
            }
          });
        }
      } else if (
        scrollCard.value.clientHeight - scrollObj.scrollTop - 308 >
        state.tishiHeight
      ) {
        flag.value = 0;
      }
    };

    // 父组件方法
    const parentFun = inject(`${props.methodName}`) as Function;

    // 默认加载通告列表
    onMounted(() => {
      parentFun().then((res: any) => {
        if (res.code === 200) {
          state.list = state.list.concat(res.data);
        } else {
          flag.value = -1;
        }
      });
    });

    // 卡片点击事件
    const clickCard = (row: any) => {
      state.dialogVisible = true;
      state.dialog = row;
    };

    return {
      ...toRefs(state),
      scrollCard,
      flag,
      refresh,
      handleScroll,
      clickCard,
    };
  },
});
</script>

<style lang="scss" scoped>
.el-card {
  --el-card-padding: 10px;
  cursor: pointer;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
:deep(.el-scrollbar__bar.is-vertical > div) {
  background-color: #409eff;
}

.unimportant {
  font-size: 12px;
  color: #c0c4cc;
}

.context {
  text-indent: 32px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdRefresh {
  text-align: center;
}

.myself {
  animation-name: myselfA;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes myselfA {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-25%);
  }
}

:deep(.el-dialog) {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
</style>
